<template>
  <div class="select-directory">
    <h2>工作目录管理</h2>

    <div class="controls">
      <button @click="selectDirectory">选择目录</button>
      <button :disabled="directories.length === 0" @click="clearDirectories">清空列表</button>
    </div>

    <ul class="directory-list">
      <li v-for="(dir, index) in directories" :key="index" class="directory-item">
        <span>{{ dir }}</span>
        <button class="delete-btn" @click="removeDirectory(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const directories = ref([])

// 从 localStorage 加载目录
const loadDirectories = () => {
  const saved = localStorage.getItem('gitDirectories')
  directories.value = saved ? JSON.parse(saved) : []
}

// 选择新目录并保存
const selectDirectory = async () => {
  const dir = await window.electronAPI.selectDirectory()
  if (dir && !directories.value.includes(dir)) {
    directories.value.push(dir)
    saveDirectories()
  }
}

// 保存到 localStorage
const saveDirectories = () => {
  localStorage.setItem('gitDirectories', JSON.stringify(directories.value))
}

// 删除指定目录
const removeDirectory = (index) => {
  directories.value.splice(index, 1)
  saveDirectories()
}

// 清空所有目录
const clearDirectories = () => {
  directories.value = []
  saveDirectories()
}

onMounted(() => {
  loadDirectories()
})
</script>

<style scoped>
.select-directory {
  background-color: #1e1e1e;
  color: #d4d4d4;
  padding: 20px;
  border-radius: 5px;
  font-family: 'Consolas', 'Courier New', monospace;
}

.controls {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

button {
  background: #007acc;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #0062a3;
}

button:disabled {
  background: #3d3d3d;
  cursor: not-allowed;
}

.directory-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.directory-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #252526;
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.delete-btn {
  background: #f44336;
  padding: 4px 8px;
  font-size: 0.9em;
}

.delete-btn:hover {
  background: #d32f2f;
}
</style>
